<template>
  <el-dialog @close="kcxxCancel('kcxxRuleForm')" :close-on-click-modal="false" append-to-body title="提交勘场凭证"
    :visible.sync="kcxxVisible" width="500px">
    <div class="scroll-view">
      <el-form :model="kcxxRuleForm" :rules="kcxxRules" ref="kcxxRuleForm" label-position="top">
        <el-form-item label="勘场金额" prop="amount_collected">
          <el-input class="input-box" type="number" clearable
            v-input-limit="2"
            v-model="kcxxRuleForm.amount_collected"></el-input>
        </el-form-item>
        <el-form-item label="收款账户" prop="receiving_account_id">
          <el-select class="input-box" v-model="kcxxRuleForm.receiving_account_id" placeholder="请选择" filterable
            clearable>
            <el-option v-for="item in companyList" :key="item.id" :label="item.account_name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input :rows="4" class="input-box" v-model="kcxxRuleForm.remark" type="textarea"></el-input>
        </el-form-item>
        
        <el-form-item label="收款凭证 (.jpg,.png,.gif)" prop="payment_voucher">
          <el-input style="position: absolute; z-index: 0; top: -999999px"
            v-model="kcxxRuleForm.payment_voucher.length"></el-input>
          <el-upload  accept="image/*" :file-list="kcxxRuleForm.payment_voucher" multiple
            :on-change="kcxxChangeFile" :on-remove="kcxxFileRemove" :auto-upload="false" action="#">
            <el-button size="small" icon="el-icon-plus">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer">
      <el-button @click="kcxxCancel('kcxxRuleForm')">关闭</el-button>
      <el-button type="primary" @click="kcxxSubmit('kcxxRuleForm')" :disabled="diaLoading" :loading="diaLoading">确
        定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import projectApi from "@/api/projectApi";
import companyApi from "@/api/companyApi";
import adminApi from "@/api/adminApi";
import { getUserInfo } from "@/utils/auth";
import foremanApi from "@/api/foremanApi";

export default {
  name: "",
  props: {
    addDialogVisible: {
      type: Boolean,
      default: false,
      required: false,
    },
    project_id: {
      default: "",
      required: false,
    },
  },
  data() {
    var paymentVoucher = (rule, value, callback) => {
      if (!value.length) {
        callback(new Error("请上传凭证"));
      } else {
        callback();
      }
    };
    return {
      kcxxVisible: false,
      kcxxRuleForm: {
        amount_collected: "",
        receiving_account_id: "",
        remark: "",
        payment_voucher: [],
      },
      kcxxRules: {
        amount_collected: [
          { required: true, message: "请输入勘场金额", trigger: "change" },
        ],
        receiving_account_id: [
          { required: true, message: "请选择收款账户", trigger: "change" },
        ],
        payment_voucher: [
          { required: true, validator: paymentVoucher, trigger: "change" },
        ],
      },
      companyList: [],
      diaLoading: false,
    };
  },
  watch: {
    addDialogVisible(val1, val2) {
      if (this.addDialogVisible) {
        this.getCompanyList(1);
      }
      this.$nextTick(() => {
        this.kcxxVisible = this.addDialogVisible;
      });
    },
  },
  computed: {},
  mounted() { },
  methods: {
    // 收款账户列表
    getCompanyList(account_type) {
      companyApi
        .getCompanyList({
          page: 1,
          num: 9999,
          keyword: "",
          account_type,
        })
        .then((res) => {
          console.log(res, account_type == 1 ? "公司列表" : "收款账户");
          if (res.code == 200) {
              this.companyList = res.data.list;
          } else {
            this.$message.warning(res.message);
          }
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    // 提交勘场凭证
    kcxxSubmit(formName) {
      let kcxxRuleForm = this.kcxxRuleForm;
      let receiving_account_name = '';
      let companyList = this.companyList;
      console.log(kcxxRuleForm, "kcxxRuleForm");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let index = companyList.findIndex(item=>{
            return item.id == kcxxRuleForm.receiving_account_id;
          })
          receiving_account_name = companyList[index].account_name;
          console.log(receiving_account_name,"账户名")
          let formdata = new FormData();
          let data = {
            project_id: this.project_id,
            amount_collected: kcxxRuleForm.amount_collected,
            receiving_account_id: kcxxRuleForm.receiving_account_id,
            receiving_account_name,
            remark: kcxxRuleForm.remark,
          };
          formdata.append("data", JSON.stringify(data));
          kcxxRuleForm.payment_voucher.forEach((item, index) => {
            formdata.append("payment_voucher[]", item.raw);
          });
          this.submitSurveyFees(formdata);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitSurveyFees(data) {
      this.diaLoading = true;
      projectApi
        .submitSurveyFees(data)
        .then((res) => {
          console.log(res, "提交勘场凭证");
          this.diaLoading = false;
          if (res.code == 200) {
            this.$emit("onSuccess", true);
          }
          this.$message({
            type: res.code == 200 ? "success" : "warning",
            message: res.code == 200 ? "处理成功" : res.message,
          });
        })
        .catch((err) => {
          this.diaLoading = false;
          this.$message({
            type: "warning",
            message: err.message,
          });
        });
    },
    // 勘场凭证凭证
    kcxxChangeFile(e, list) {
      let kcxxRuleForm = this.kcxxRuleForm;
      kcxxRuleForm.payment_voucher = [e];
      this.kcxxRuleForm = kcxxRuleForm;
    },
    // 删除选择凭证
    kcxxFileRemove(e, list) {
      let kcxxRuleForm = this.kcxxRuleForm;
      kcxxRuleForm.payment_voucher = list;
      this.kcxxRuleForm = kcxxRuleForm;
    },
    // 关闭提交勘场凭证弹窗
    kcxxCancel(formName) {
      this.kcxxRuleForm = {
        amount_collected: "",
        receiving_account_id: "",
        remark: "",
        payment_voucher: [],
      };
      this.$nextTick(() => {
        this.$refs[formName].clearValidate();
        this.$emit("onClose", true);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>